<template>
  <div class="pc-broadcast inner-box">
    <bread :backTitle="$t('broadcast.title')"></bread>
    <h1 class="title">{{$t('broadcast.title')}}</h1>
    <p class="infos">{{$t('broadcast.tip')}}</p>
    <textarea name class="textvalue" v-model="param"></textarea>
    <div class="tip flex-left">
      <i class="iconfont iconjinggao"></i>
      <span>
        {{$t('broadcast.notice')+$t('broadcast.ps')}}
        <router-link to="/alytx">{{$t('broadcast.link')}}</router-link>
      </span>
    </div>
    <p class="link" v-if="result">
      <router-link :to="{ path: '/tradeHash', query: { hash: result }}">{{result}}</router-link>
    </p>
    <div
      class="sub-btn flex-center"
      @click="submit('Ptx')"
      :class="{disabled:isDisabled}"
    >{{$t('broadcast.btn')}}</div>
  </div>
</template>

<script>
import Bread from "@/components/computer/Breadcrumb.vue";
import BroadBase from "@/mixins/Tool/AlyOrSendTx.js";
export default {
  mixins: [BroadBase],
  components: {
    Bread
  }
};
</script>

<style lang="scss" scoped>
.pc-broadcast {
  .title {
    margin-top: 30px;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    color: $black_title;
  }
  .link {
    margin-top: 20px;
  }
  .infos {
    margin: 10px 0 30px;
    font-size: 14px;
    font-weight: 400;
    color: $font_grey;
  }
  .sub-btn {
    width: 180px;
    height: 45px;
    margin: 20px auto;
    background: $blue;
    border-radius: 25px;
    color: $white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
  }
  .sub-btn:hover {
    opacity: 0.8;
  }
  .sub-btn:active {
    opacity: 1;
  }
  .disabled {
    background: $grey_deep;
    cursor: not-allowed;
  }
  .tip {
    margin-top: 20px;
    color: $orange_deep;
    .iconjinggao {
      font-size: 18px;
    }
    span {
      margin-left: 12px;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      a {
        color: $blue;
      }
    }
  }
  .textvalue {
    width: 100%;
    height: 200px;
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    border: 2px solid rgba(235, 239, 241, 1);
    resize: none;
    font-size: 14px;
  }
  .textvalue::-webkit-scrollbar {
    width: 1px;
    height: 1px;
    cursor: pointer;
  }
}
</style>
